登录
<template>
  <Headerbar />
  <div id="container" class="flex justify-center">
    <div class="show-box mb-5">
      <div class="content">
        <span style="color: #0080ff; font-weight: 600">{{ nameOfList }}</span>
        的动态
        <indexResearchList
          :rawList="researchList"
          :isSelf="isSelf"
        ></indexResearchList>
        <div style="text-align: center" v-if="researchList.length === 0">
          <span style="color: #0080ff; font-weight: 600">{{ nameOfList }}</span
          >还没有动态哦~
        </div>
      </div>
      <div style="width: 100%" v-if="listLoading">
        <div style="margin: 10px auto; width: 50px">
          <n-spin size="large" />
        </div>
      </div>
    </div>
    <div class="chosen-box mb-5">
      <div class="content">
        <span style="color: ">关注列表</span>
        <div style="width: 100%" v-if="followListLoading">
          <div style="margin: 10px auto; width: 50px">
            <n-spin size="large" />
          </div>
        </div>
        <div
          v-if="!followListLoading"
          class="follow-item"
          v-for="(item, index) in followList"
          @click="handleSelect(index, item)"
          :class="chosenIndex == index ? 'actived' : 'noActived'"
        >
          <img :src="item.avatar" />
          <div>
            <div class="item-name">{{ item.name }}</div>
            <div class="ins">{{ formatInstitution(item.institution) }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Headerbar from '../../components/common/Headerbar.vue'
import api from '@/api/api'
import indexResearchList from '@/components/common/indexResearchList.vue'

const message = useMessage()

// import api from '@/api/api'

// const formRef = ref(null);
// const message = useMessage();
// const router = useRouter()
const followList = ref([])
//判断选择到了哪个关注者
const chosenIndex = ref(0)
const followListLoading = ref(true) //关注列表加载中

const getFollowings = function () {
  api.User.getFollowList({ id: localStorage.getItem('id') }).then((res) => {
    if (res.success) {
      followList.value = res.data.following
      followList.value.unshift({
        name: '我',
        avatar: localStorage.getItem('avatar'),
        institution: '',
        id: localStorage.getItem('id')
      })
      followListLoading.value = false
      chosenIndex.value = 0
      handleSelect(0, { id: localStorage.getItem('id'), name: '我' })
    } else {
      message.error(res.msg)
    }
  })
}
//选择某个关注者
const handleSelect = function (index, person) {
  chosenIndex.value = index
  nameOfList.value = person.name
  if (index == 0) {
    isSelf.value = true
  } else {
    isSelf.value = false
  }
  //查找动态
  getResearchList(person.id)
}

//是否是“我”的动态
const isSelf = ref(true)
const researchList = ref([])
//关注者动态加载中
const listLoading = ref(true)
//是谁的动态
const nameOfList = ref('')
//获取关注者动态
const getResearchList = function (id) {
  listLoading.value = true
  api.Entry.getListById({
    id
  }).then((res) => {
    if (res.success) {
      researchList.value = res.data.list
      listLoading.value = false
    } else {
      message.error(res.msg)
    }
  })
}
//过滤器，当组织名过长时
const formatInstitution = function (str) {
  if (str.length < 16) return str
  return str.slice(0, 16) + '...'
}

onMounted(() => {
  getFollowings()
})
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  min-height: calc(100vh - 73px);
  overflow: auto;
  .show-box {
    margin-top: 30px;
    width: 760px;
    background-color: #fff;
    margin-right: 40px;
    box-shadow: 0 0px 2px rgb(0 0 0 / 18%), 0 1px 3px rgb(255 255 255);
    height: fit-content;

    .content {
      padding: 20px;
    }
  }
  .chosen-box {
    height: fit-content;
    margin-top: 30px;
    width: 250px;
    background-color: #fff;
    box-shadow: 0 0px 2px rgb(0 0 0 / 18%), 0 1px 3px rgb(255 255 255);
    .content {
      padding: 20px;
      .follow-item {
        width: 190px;
        display: flex;
        margin: 10px 0 20px 0;
        cursor: pointer;
        img {
          margin-right: 10px;
          height: 50px;
          width: 50px;
          border-radius: 50%;
        }
        .item-name {
          margin-top: 3px;
          font-weight: 600;
          font-size: 0.875rem;
        }
        .ins {
          font-size: 0.875rem;
          color: #111111;
          font-weight: 400;
        }
      }
      .actived {
        color: #0080ff !important;
      }
    }
  }
}
</style>
